<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-size: 黑体;
        box-sizing: border-box;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #222;
    }

    .box {
        /* 对整个盒子进行设置 超出部分隐藏用于最后的效果,并且相对定位相对于原本的位置进行定位,以便于子元素根据父元素的位置
        进行定位  子决父向 */
        overflow: hidden;
        position: relative;
        width: 380px;
        height: 420px;
        background: #1c1c1c;
        border-radius: 8px;
    }

    /* 对from进行样式设置 进行绝对定位,相对于上面的box进行定位, */
    .box form {
        position: absolute;
        inset: 4px;
        /*定位元素边框或内边距的简写属性 设置所有方向的边距为4px 没啥用 */
        background: #222;
        padding: 50px 40px;
        border-radius: 8px;
        z-index: 2;
        /* 用于控制元素在垂直层叠顺序中的显示级别 较大的值表示元素在堆叠顺序中更靠前，
        即位于上层；较小的值表示元素在堆叠顺序中更靠后，即位于下层。 */
        display: flex;
        flex-direction: column;
        /*flex换轴 容器内的元素将在垂直方向上从上至下排列，
        主轴方向为垂直方向。这意味着元素将在垂直方向上按照从上到下的顺序进行布局，而不是默认的水平方向。*/
    }

    .box form h2 {
        color: #fff;
        font-weight: 500;
        text-align: center;
        /*加粗文字居中 */
        letter-spacing: 0.1em;
        /* 制文本中字符之间的间距为0.1em 属性应用于 <p>、<h> 以及 <span> 元素*/
    }

    .box form .inputBox {
        /* 相对于form进行定位 */
        position: relative;
        width: 300px;
        margin-top: 35px;
    }

    .box form .inputBox input {
        /* 相对于.inputBox进行定位 */
        position: relative;
        width: 100%;
        padding: 20px 10px 10px;
        background: transparent;
        /*input文本框隐藏起来方便用li标签的那根线撑起来形成文本框仅仅只是展示效果,实际上任然是input文本框 */
        outline: none;
        border: none;
        box-shadow: none;
        /*阴影设置*/
        color: #23242a;
        font-size: 1em;
        letter-spacing: 0.05em;
        /* 制文本中字符之间的间距为0.1em 属性应用于 <p>、<h> 以及 <span> 元素*/
        z-index: 10;
        /*优先级设置 */
        transition: 0.3s;
    }

    .box form .inputBox span {
        position: absolute;
        left: 0;
        padding: 20px 0px 10px;
        pointer-events: none;
        color: #8f8f8f;
        font-size: 1em;
        letter-spacing: 0.05em;
        transition: 0.5s;
        /*动画过渡*/
    }

    .box form .inputBox input:valid~span,
    /*选择器将选择所有紧跟在有效输入字段后的 <span> 元素。*/
    .box form .inputBox input:focus~span

    /*用于选中处于焦点状态的输入字段之后的所有 <span> 元素。*/
        {
        color: #fff;
        font-size: 0.75em;
        transform: translateY(-34px);
        /*向上移动34个像素*/
    }

    .box form .inputBox i {
        position: absolute;
        /*相对于inputBox定位,并且在最左和最下面 */
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        border-radius: 5px;
        overflow: hidden;
        transition: 0.5s;
        pointer-events: none;
    }

    /* 登录面块 获取点击时的样式，点击使得这条线变高形成输入框 */
    .box form .inputBox input:valid~i,
    .box form .inputBox input:focus~i {
        height: 42px;
    }

    /* 设置flex a链接的样式 */
    .box form .links {
        display: flex;
        justify-content: space-between;
        /*容器内的 flex 项目在水平方向上均匀分布，
        项目之间的间距相等，并且最左侧和最右侧的项目紧贴容器的边界。*/
    }

    .box form .links a {
        margin: 10px 0;
        font-size: 0.75em;
        color: #8f8f8f;
    }

    /* 移动上去改变颜色 */
    .box form .links a:hover,
    .box form .links a:nth-child(2) {
        color: #fff;
    }

    /* 按钮样式 */
    .box form input[type='submit'] {
        padding: 9px 25px;
        background: #fff;
        cursor: pointer;
        /*设置鼠标样式*/
        font-size: 0.9em;
        border-radius: 5px;
        font-weight: 600;
        width: 80%;
        margin-top: 10px;
        margin-left: 30px;
    }

    /* 登录按钮点击时透明度为80% */
    .box form input[type='submit']:active {
        opacity: 0.8;
    }

    /* 添加流光动画 */
    .borderLine {
        position: absolute;
        top: 0;
        inset: 0;
    }

    @keyframes animate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .box::before,
    .box::after,
    .borderLine::before,
    .borderLine::after {
        /* 对box和borderlin前后插入伪元素 为元素content必修有尽管它可以是空 */
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 380px;
        height: 420px;
        /* 使用线性渐变作为伪元素的背景样式。渐变采用了透明到非透明的过渡，具体颜色值会根据动画来变化。 */
        background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
        z-index: 1;
        /*设置伪元素的层级为 1，使其位于正常文档流之上。位于其他大于一的效果之下从而辅助形成一条线的效果*/
        transform-origin: bottom right;
        /*控制元素的旋转、缩放和倾斜等变换效果的起始位置 从右下开始从而形成逆时针效果bottom right*/
        /* animation: animate 6s linear infinite;  */
    }

    .box::after {
        animation-delay: -3s;
        /*动画开始前延迟*/
    }

    .borderLine::before {
        background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
        animation-delay: -1.5s;
    }

    .borderLine::after {
        background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
        animation-delay: -4.5s;
    }

    .dropdown ul {
        list-style-type: none;
        padding: 0;
        margin: 10px 0 0 0;
        background-color: #f9f9f9b6;
        border: 0px solid #ccc;
        border-radius: 4px;
        max-height: 200px;
        overflow-y: auto;
        position: absolute;
        width: 100%;
        top: 100%;
        z-index: 999;
    }

    .dropdown li {
        padding: 8px 12px;
        cursor: pointer;
    }

    .dropdown li:hover {
        background-color: #e5e5e5;
    }
    
</style>

<body>
    <div class="box">
        <span class="borderLine"></span>
        <form>
            <h2>Sign In</h2>
            <div class="inputBox dropdown">
                <!-- <div class="clearable-input">
                    <input type="text" id="inputBox" onkeyup="showSuggestions()" required maxlength="8">
                    <span class="clear-btn" onclick="clearInput()">X</span>
                </div> -->
                <input type="text" id="inputBox" onkeyup="showSuggestions()" required maxlength="8">
                <span>User name</span><i></i>
                <ul id="suggestionsList"></ul>
            </div>
            <div class="inputBox">
                <input type="password" required>
                <span>Password</span><i></i>
            </div>
            <div class="links">
                <a href="#">Forget password</a><a href="#">Sing up</a>
            </div>
            <input type="submit" value="Login">
        </form>
    </div>
</body>

</html>
<script>
    const suggestions = ['apple', 'banana', 'orange', 'grape', 'kiwi', 'orange1', 'orange2', 'orange3', 'orange4', 'orange5', 'orange6', 'orange7', 'orange8', 'orange'];

    function showSuggestions() {
        const input = document.getElementById('inputBox');
        const userInput = input.value.toLowerCase();
        const suggestionsList = document.getElementById('suggestionsList');
        suggestionsList.innerHTML = '';
        if (userInput === '') {
            suggestionsList.style.display = 'none';
            return;
        }
        // if (userInput.length > maxLength) {
        //     console.log(userInput)
        //     input.value = userInput.substring(0, maxLength)
        // }
        const filteredSuggestions = suggestions.filter((item) => item.toLowerCase().startsWith(userInput));
        if (filteredSuggestions.length > 0) {
            suggestionsList.style.display = 'block';
            for (let i = 0; i < filteredSuggestions.length; i++) {
                const suggestionItem = document.createElement('li');
                suggestionItem.textContent = filteredSuggestions[i];
                suggestionItem.addEventListener('click', function () {
                    input.value = this.textContent;
                    suggestionsList.style.display = 'none';
                });
                suggestionsList.appendChild(suggestionItem);
            }
        } else {
            suggestionsList.style.display = 'none';
        }
    }

    document.addEventListener('click', function (event) {
        const dropdown = document.querySelector('.dropdown');
        if (!dropdown.contains(event.target)) {
            document.getElementById('suggestionsList').style.display = 'none';
        }
    });
</script>